<template>
  <view>
   <view class="search-box">
     <my-search @click="gotoSearch"></my-search>
   </view>
    <view class="Tit">
      <view class='tittle'>
           <uni-data-select
             v-model="value"
             :localdata="range"
             @change="change"
             :clear="false"
           ></uni-data-select>
      </view>
      <view class='tittle'  @click="GetPrice()">
        <view  v-if="PriceState === false">
          <text color="#ffffff">价格</text>
          <uni-icons type="bottom" size="17" color="white"></uni-icons>
        </view>
        <view v-else-if="PriceState === true">
          <text color="#3f7ac6" >价格</text>
          <uni-icons type="top" size="17" color="white"></uni-icons>
        </view>
      </view>

      <view class='tittle'>
        <view>
          <text color="#ffffff">出品</text>
          <uni-icons type="bottom" size="17" color="white"></uni-icons>
        </view>
      </view>
      <view class='tittle'>
        <view>
          <text color="#ffffff">系列</text>
          <uni-icons type="bottom" size="17" color="white"></uni-icons>
        </view>
      </view>
    </view>
    
    <view class="cangpi" v-for="(item,index) in cangList" :key='index'>
          <image :src="item.photo" class="cang_img"></image>
          <!-- <view class="cang_name">{{item.name}}</view> -->
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        cangList:[],
        PriceState: false,
        WeiState: false,
        
        value: 1,
        range: [
          { value: 1, text: "藏品" },
          { value: 2, text: "二维藏品" },
          { value: 3, text: "三维藏品" },
          { value: 0, text: "实物藏品" },
        ],
      };
    },
    onLoad() {
      this.getAll()
    },
    methods: {
      async getAll() {
        const {data:res } = await uni.$http.get('/goods-exhibition/all')
        // console.log(res);
        if(res.code !== 200) {
          console.log("错误");
        }
        this.cangList = res.data
      },
      async GetPrice() {
        var PP = 0
        if(this.PriceState == false) {
          PP = 0
        } else {
          PP = 1
        }
        console.log(PP);
        const {data:res } = await uni.$http.get('/goods-exhibition/fenlei/'+ PP)
        if(res.code !== 200) {
          console.log("错误");
        }
        this.PriceState = !this.PriceState
        this.cangList = res.data
      },
      async change(val) {
        const {data:res } = await uni.$http.get('/goods-exhibition/dim/'+ val)
        if(res.code !== 200) {
          console.log("错误");
        }
        this.cangList = res.data
      },
      gotoSearch() {
        uni.navigateTo({
        url: '/subpkg/search/search'
        })
      },
    }
  }
</script>

<style lang="scss">
  .Tit {
    display: flex;
    flex: 4;
    // background-color: #686868;
    color: #ffffff;
    height: 60rpx;
    line-height: 60rpx;
  }
  .tittle {
    justify-content: center;
    text-align: center;
    width: 25%;
    // border: 1rpx solid #efefef;
    // border-radius: 20rpx;
  }
  
  .cangpi {
   display: inline-block;
   // justify-content: space-around;
   // background-color: aqua;
   width: 45%;
   height: 500rpx;
   margin: 20rpx 18rpx;
   position: relative;
   border-radius: 20rpx;
   overflow: hidden;
   .cang_img {
     width: 100%;
     height: 100%;
   }
   .cang_name {
     position: absolute;
     top:40%;
     left: 40%;
   }
  }
  .search-box {
    // 设置定位效果为“吸顶”
    position: sticky;
    // 吸顶的“位置”
    top: 0;
    // 提高层级，防止被轮播图覆盖
    z-index: 999;
  }
    .text {
      font-size: 12px;
      color: #ffffff;
      margin-top: 5px;
    }
  
    .uni-px-5 {
      padding-left: 10px;
      padding-right: 10px;
    }
  
    .uni-pb-5 {
      padding-bottom: 10px;
    }
    .uni-select__selector  {
      color: #000000;
    }
</style>
